<template>
  <div class="el-container position" ref="father" @scroll="handlerScroll">
    <div style="height :5000px;">
      <img ref="box" id="box" src="https://img0.baidu.com/it/u=1451490909,2592843774&fm=26&fmt=auto" alt />
    </div>
  </div>
</template>
<script>

import funs from '../../utils/animationUtil.js'
export default {
  name: 'test',
  data(){
    return {
      offsetTop:0,
      box:null
    }
  },
  mounted() {
      this.box = this.$refs.box;
      this.offsetTop = this.box.offsetTop;
  },
  methods: {
    //当前盒子的top=页面滚动的高度+黑色盒子的偏移量(就是初始值)
  
    handlerScroll(e) {
      /*body滚动才有效果  
      let top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
       console.log("top====>",top) */
     /*   
         let offsetHeight = e.target.offsetHeight
       let scrollWidth = e.target.scrollWidth
       let scrollLeft = e.target.scrollLeft
       let scrollHeight = e.target.scrollHeight 
       console.log('offsetHeight',offsetHeight)
      console.log('scrollWidth',scrollWidth)
      console.log('scrollLeft',scrollLeft)
      console.log('scrollHeight',scrollHeight)  */
      let scrollTop = e.target.scrollTop
       console.log('scrollTop',scrollTop)
       console.log('offsetTop',this.offsetTop)
       let  positionTop =scrollTop+this.offsetTop
       funs.yundongAndToumin(this.box, { "top": positionTop })
    }
  }
}
</script>
<style scoped>
.el-container {
  overflow: auto !important;
  }
.position{
   position: relative;
}
img {
  position: absolute;
  top: 200px;
  left: 30px;
  width: 200px;
  height: 200px;
}
</style>
